<template>
  <div class='container'>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="card">
          <div slot="header" class="clearfix">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          </div>
          <div class="card-body">
            <el-tree
              ref="tree" :props="props" :data="data" :highlight-current="false" node-key="code"
              :default-expanded-keys="[0]" :filter-node-method="filterNode" :render-content="renderContent"
            ></el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix">
            {{tableName}}
          </div>
          <div class="card-body">
            <el-table stripe
               :data="tableData" v-loading="listLoading" element-loading-text="加载中..." border fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column align="center" label="股票代码">
                <template slot-scope="scope">
                  <span>{{scope.row.code}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="股票名称">
                <template slot-scope="scope">
                  <span>{{scope.row.name}}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="listQuery.page"
                :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import { plateListTree, plateStock, plateList } from '@/api/group'
  import pinyin from 'pinyin'

  export default {
    name: 'List',
    watch: {
      filterText(val) {
        if (!val) return this.$refs.tree.filter(val)
        const params = {
          pageNum: 1,
          pageSize: 9999,
          type: 0,
          phoneticChars: val
        }
        plateList(params).then(response => {
          this.plateList = response.Data.map(e => e.code)
          this.$refs.tree.filter(val)
        })
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getStock() {
        this.listLoading = true
        const params = {
          pageNum: this.listQuery.page,
          pageSize: this.listQuery.pageSize,
          queryKey: this.listQuery.search
        }
        plateStock(params).then(response => {
          this.tableData = response.Data
          this.total = response.PageInfo.Total * 1
          this.listLoading = false
        })
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getStock()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val
        this.getStock()
      },
      searchStock(node, data, e) {
        e.stopPropagation()
				this.listQuery = {
          page: 1,
          pageSize: 20,
          search: data.code
        },
        this.tableName = data.name
        this.getStock()
      },
      getList() {
        const params = {
          pageNum: 1,
          pageSize: 9999,
          type: 0
        }
        plateListTree(params).then(response => {
          const temp = {}
          const result = []
          const data = response.Data
          const length = data.length
          for (let i = 0; i < length; i++) {
            data[i].name = data[i].name + '(' + data[i].code + ')'
            temp[data[i].code] = data[i]
          }
          for (let i = 0; i < length; i++) {
            if (temp[data[i].code].parentCode && temp[data[i].parentCode]) {
              if (!temp[data[i].parentCode].children) {
                temp[data[i].parentCode].children = []
              }
              temp[data[i].parentCode].children.push(temp[data[i].code])
            } else {
              result.push(temp[data[i].code])
            }
          }
          this.data[0].children = result
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1 || pinyin(data.name, {
          style: pinyin.STYLE_FIRST_LETTER,
          heteronym: true
        }).join('').indexOf(value) !== -1 || this.plateList.indexOf(data.code) !== -1
      },
      renderContent(h, { node, data, store }) {
        return (
          <span class={(node.isLeaf && node.level > 1) ? 'custom-tree-node' : 'custom-tree-node custom-tree-notLeaf'}>
            <el-tooltip className="item" effect="dark" content={node.label} placement="top-start">
              <span class="tree-label">{node.label}&nbsp;</span>
            </el-tooltip>
            <span>
              {node.isLeaf && node.level > 1 ? <el-button
                size='mini' type='text' on-click={(e) => this.searchStock(node, data, e)}
              >查看股票</el-button> : ''}
            </span>
          </span>)
      }
    },

    data() {
      return {
        list: null,
        total: 0,
        listLoading: false,
        tableName: '板块股票列表',
        listQuery: {
          page: 1,
          pageSize: 20,
          search: undefined
        },
        filterText: '',
        props: {
          label: 'name',
          id: 'code'
        },
        data: [{
          name: '概念板块',
          code: 0,
          children: []
        }],
        tableData: [],
        plateList: []
      }
    }
  }
</script>

<style type="scss" scoped>
  .col {
    margin: auto;
  }

  .card-body {
    margin-top: 1rem;
  }

  .form {
    max-width: 500px !important;
    margin: auto !important;
  }
</style>

<style>
  .el-tag {
    margin-right: 3px;
    background-color: rgba(64, 158, 255, .1);
    color: #409EFF;
    border-radius: 4px;
    padding: 0 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(64, 158, 255, .2);
  }
</style>


